<template>
  <div>
    <ul class="iview-layerControl">
      <li v-if="layerControlLsit" v-for="(item,index) in layerControlLsit" :data="index"    :class="'dropMdClose'+index">
        <div class="layer-header iview-modal-theme">
          <span>{{item.name}}</span>
          <span class="position-location ">
              <Icon type="md-arrow-dropdown" style="display: none" :class=" 'dropShowValueDropdown'+ index  "
                    @click="dropShow(index)"></Icon>
              <Icon type="md-close" @click="dropMdClose(index,item)"></Icon>
            </span>
        </div>
        <div class="layer-body" :class="'dropShowValue' + index">
         <span class="flex-layout">
           <Slider ref="layerName" v-model="item.num" :name="item.name" :max="maxNum" @on-change="changeOpacity($event,item.name)"></Slider>
         </span>
          <span>
           <Icon title='属性查询' type="ios-list-box" class="iconfont icon-xiangxixinxi"></Icon>
           <Icon title='图例' type="ios-list" class="iconfont icon-tuli" @click="mapExample(index,item.key)"></Icon>
           <Icon title='全图' type="md-baseball" class="iconfont icon-quantu"></Icon>
           <Icon type="md-arrow-dropright" style="display: inline-block" :class=" 'dropShowValueDropright'+ index  "
                 @click="dropHide(index)" class="iconfont icon-right"></Icon>
         </span>
        </div>
      </li>
    </ul>
    <datal-modle ref="itemName" title="图例" number="300" class="mapExp">
      <div v-for="mapExp in mapLenged">
        <p class="tilte">{{mapExp.title}}</p>
      <div  v-for="list in mapExp.mapExpList">
        <div>
         <!--  <Icon type="ios-square" :style="{color:list.color}"></Icon> -->
         <img :src="'data:image/png;base64,'+list.imageData" :style="{height:list.height,width:list.width}">
          <span v-if="list.label"> {{list.label}}</span>
        </div>
      </div>
      </div>

    </datal-modle>
    <!--<div v-if="mapExpList" v-for="queryList in layerControlLsit"  style="background-color: #6bc642">
      &lt;!&ndash;{{queryList}} -&#45;&#45;&#45;&#45;&#45;&#45; {{queryList.id}}&ndash;&gt;
      <div  v-if="queryList" v-for="queryItem in queryList"  >

        &lt;!&ndash;<datal-modle ref="queryItem.datailToggle" title="数据筛选" number="400" class="iview-queryM">
          <LayerFilter :LayerData="layerData"></LayerFilter>
        </datal-modle>&ndash;&gt;
      </div>

    </div>-->
    <!--可以用的-->
    <!--<datal-modle ref="queryFilterModal" title="数据筛选" number="400" class="iview-queryM">
      <LayerFilter :LayerData="layerData"></LayerFilter>
    </datal-modle>-->
    <model-state ref="queryFilter" :datailToggleList="layerControlLsit" number="400">
      <!--<LayerFilter :LayerData="layerData"></LayerFilter>-->
    </model-state>

  </div>


</template>

<script>
import $ from "jquery";
import datalModle from "../public/modle.vue";
import LayerFilter from "./LayerFilter";
import modelState from "../public/modleState.vue";
import Bus from "./Bus.js";
import global_ from "./Global";
import esriLoader from 'esri-loader'

export default {
  components: {
    datalModle,
    LayerFilter,
    modelState
  },
  props: {
    mapId: {
      type: String,
      default: "mainMap"
    }
  },
  data() {
    return {
      name: "layercontrolModel",
      //maps: global_.maps,
      searchModal: false,
      datailContent: false,
      dropToggleState: true,
      dropShowValue: true,
      sliderValue: 23,
      maxNum: 100,
      a: [{ name: 1 }, { name: 2 }, { name: 3 }],
      layerControlLsit: [
        /*   {name: '监事点', num: 1, mapexample: "ddd"},
          {name: '重点调查区', num: 1, mapexample: "ddd"},
          {name: '地质灾害已发生区', num: 1, mapexample: "ddd"} */
      ],
      layerData: { name: "jjj" },
      itemName: false,
      mapLenged: [
        /*   {
          mapExpList: [],
          tilte: ""
        } */
      ],
      title: " "
    };
  },
  mounted() {
    Bus.$on(
      "addLayerBox",
      function(layer) {
        var obj = {
          name: layer.label,
          num: layer.ILayer.Transparent||80,
          key: layer
        };
        this.layerControlLsit.push(obj);
      }.bind(this)
    );
    Bus.$on(
      "removeLayerBox",
      function(layer) {
        var obj = {
          name: layer.label,
          num: layer.ILayer.Transparent,
          key: layer
        };
        var inde;
        for (var i = 0; i < this.layerControlLsit.length; i++) {
          if (this.layerControlLsit[i].name == layer.label) inde = i;
        }
        this.layerControlLsit.splice(inde, 1);
      }.bind(this)
    );
  },
  methods: {
    changeOpacity: function(value, name) {
      var self = this;

     // clayer.setOpacity(value / 100.0);
      esriLoader.loadModules(["widget/MapManager"]).then(([MapManager]) => {
        debugger
        var maps = global_.maps;
     // var clayer = maps[self.mapId].getLayer(name);
     var globalMap = maps[self.mapId];
        var map = MapManager.getMap(self.mapId);
       // var clayer = maps[self.mapId].getLayer(name);
       var clayer = map.getLayer(name);
        //var opacity=
        clayer.setOpacity(value / 100.0);
      });
    },
    mapExample: function(index, item) {
      var m = this;
      // var s=m.itemNames
      //  s=expanple.name;
      // m.itemName="ddd" +index;
      //m.$refs.itemName
      console.log(item);
      m.$refs.itemName.datailToggle = !m.$refs.itemName.datailToggle;
      var lenUrl = item.ILayer.QueryUrl + "/legend?f=pjson";
      m.tilte = item.label;
      this.$http.get(lenUrl, {}, { emulateJSON: true }).then(
        function(response) {
          var strLayer = JSON.stringify(response.body);
          var lengedinfo = JSON.parse(strLayer);
          for (var i = 0; i < lengedinfo.layers.length; i++) {
            if (lengedinfo.layers[i].layerName == item.ILayer.LayerName) {
              // for (var k = 0; k < strLayer.layers[i].legend.length; k++) {
              //var lobj = {};
              // m.mapExpList.push(lobj);
              // }
              m.mapExpList = lengedinfo.layers[i].legend;
            }
          }
          var obj = {
            title: item.label,
            mapExpList: m.mapExpList
          };
          m.mapLenged.length = 0;
          //  m.mapLenged[0] = obj;
          m.mapLenged.push(obj);
        },
        function(error) {
          self.$Message.error("加载地址！");
        }
      );
      // var url="http://115.233.209.175:6080/arcgis/rest/services/DLKJKJ/MapServer/legend?f=pjson"
    },
    dropMdClose: function(index, item) {
      /*  let domC = '.dropMdClose' + index;
        $(domC).css("display", "none"); */
      var self = this;
      var name = item.name;
      this.layerControlLsit.splice(index, 1);
      if (global_.maps[self.mapId].getLayer(name)) {
        global_.maps[self.mapId].removeLayer(
          global_.maps[self.mapId].getLayer(name)
        );
      }
      Bus.$emit("clearCheck", item.key);
    },
    dropHide: function(index) {
      var m = this;

      //var  dom =m.$(e.target);
      //debugger
      var dom = ".dropShowValue" + index;
      $(dom).css("display", "none");
      var domDropdown = ".dropShowValueDropdown" + index;
      $(domDropdown).css("display", "block");
      var domDropright = ".dropShowValueDropright" + index;
      $(domDropright).css("display", "none");
    },
    dropShow: function(index) {
      var m = this;
      //var  dom =m.$(e.target);
      var dom = ".dropShowValue" + index;
      $(dom).css("display", "flex");
      var domDropright = ".dropShowValueDropright" + index;
      $(domDropright).css("display", "inline-block");
      var domDropdown = ".dropShowValueDropdown" + index;
      $(domDropdown).css("display", "none");
      // this.dropToggleState = !this.dropToggleState;
    },
    dropToggle: function() {
      var m = this;
      // this.dropToggleState = !this.dropToggleState;
      m.dropToggleState = !m.dropToggleState;
    }
  }
};
</script>

<style>
.iview-layerControl .layer-header {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.iview-layerControl .layer-header .ivu-icon-md-close {
  font-size: 18px;
}

.iview-layerControl .layer-header .position-location {
  position: relative;
}

.iview-layerControl
  .layer-header
  .position-location
  .ivu-icon-md-arrow-dropdown {
  top: -0.2rem;
}

.iview-layerControl .layer-body {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.iview-layerControl .layer-body .flex-layout {
  flex: 0.9;
}

.iview-layerControl .layer-body .ivu-icon {
  font-size: 18px;
  margin-top: 10px;
}
.iview-layerControl li{
 margin-top:10px;
}
</style>
